<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扑克牌</title>
    <link rel="stylesheet" href="../css/flex.css">
    <link rel="stylesheet" href="../css/puke.css">
</head>
<body>

<!--黑桃1-->
<div class="a" flex="main:center cross:center">
    <div class="b">
        <span>♠</span>
    </div>
</div><br>
<!--黑桃2-->
<div class="a" flex="dir:top main:justify">
    <div class="c" flex="main:center cross:center">
        <div class="b">
            <span>♠</span>
        </div>
    </div>
    <div class="c" flex="main:center cross:center">
        <div class="b">
            <span>♠</span>
        </div>
    </div>
</div><br>
<!--黑桃3-->
<div class="a" flex="main:justify dir:top">
    <div class="c" flex="main:center cross:center">
        <div class="b">
            <span>♠</span>
        </div>
    </div>
    <div class="c" flex="main:center cross:center">
        <div class="b">
            <span>♠</span>
        </div>
    </div>
    <div class="c" flex="main:center cross:center">
        <div class="b">
            <span>♠</span>
        </div>
    </div>
</div><br>
<!--黑桃4-->
<div class="a" flex="main:justify dir:top">
    <div class="c" flex="main:justify">
        <div class="b" style="margin-left:30px ;margin-top: 10px; ">
            <span>♠</span>
        </div>
        <div class="b" style="margin-right:30px;margin-top: 10px; ">
            <span>♠</span>
        </div>
    </div>
    <div class="c" flex="main:justify">
        <div class="b" style="margin-left:30px;margin-top:20px;">
            <span>♠</span>
        </div>
        <div class="b" style="margin-right:30px;margin-top:20px;">
            <span>♠</span>
        </div>
    </div>
</div><br>
<!--黑桃5-->
<div class="a" flex="main:justify dir:top">
    <div class="c" flex="main:justify">
        <div class="b" style="margin-left:30px ;margin-top: 10px; ">
            <span>♠</span>
        </div>
        <div class="b" style="margin-right:30px;margin-top: 10px; ">
            <span>♠</span>
        </div>
    </div>
    <div class="c">
        <div class="b" flex="main:center cross:center" style="margin-top: 10px;">
            <span>♠</span>
        </div>
    </div>
    <div class="c" flex="main:justify">
        <div class="b" style="margin-left:30px;margin-top:20px;">
            <span>♠</span>
        </div>
        <div class="b" style="margin-right:30px;margin-top:20px;">
            <span>♠</span>
        </div>
    </div>
</div><br>
<!--黑桃6-->
<div class="a" flex="main:justify dir:top">
    <div class="c" flex="main:justify">
        <div class="b" style="margin-left:30px ;margin-top: 10px; ">
            <span>♠</span>
        </div>
        <div class="b" style="margin-right:30px;margin-top: 10px; ">
            <span>♠</span>
        </div>
    </div>
    <div class="c" flex="main:justify">
        <div class="b" flex="cross:center" style="margin-top: 10px;margin-left: 30px">
            <span>♠</span>
        </div>
        <div class="b" flex="main:right cross:center" style="margin-bottom: -10px;margin-right: 30px">
            <span>♠</span>
        </div>
    </div>
    <div class="c" flex="main:justify">
        <div class="b" style="margin-left:30px;margin-top:20px;">
            <span>♠</span>
        </div>
        <div class="b" style="margin-right:30px;margin-top:20px;">
            <span>♠</span>
        </div>
    </div>
</div>
</div>
</body>
</html>